<template>

    <!--筛选条件-->
    <div class="shaixuan1">
        <div style="margin-top: 15px;">
            <span class="title" style="float: left;">
                <el-select v-model="userid"  filterable clearable size="small"
                           @change="getUserList" placeholder="全部销售">
                    <el-option v-for="item in salerList" :label="item.name" :value="item.userid" :key="item.index">
                    </el-option>
                </el-select>
            </span>
        </div>
        <div class="first_table">
            <el-table align="center" :data="tableData" style="width: 100%;margin-bottom: 20px;height: 650px;overflow-y: auto;" row-key="id" border stripe default-expand-all v-loading="loading">

                <el-table-column  align="center"  header-align="center" prop="wx_avatarurl" label="用户头像">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.wx_avatarurl" fit="fill" style="width: 50px;height: 50px;"></el-image>
                    </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" prop="nickname" label="用户昵称">
                </el-table-column>
                <el-table-column header-align="center" align="center" prop="saler_name" label="所属销售">
                </el-table-column>

            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNumber" :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" background layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>

    import {getSalerList,getLineUser,getPinglunList} from '@/api/live/liveonline';
    export default {
        name: 'OnlineList',
        props:{
            liveId:{
                type:String,
                default:''
            },
            prop_onlineUserList:{
                type:Array,
                default: []
            },
            prop_online_total:{
                type:Number, 
                default:0  
            },
            prop_salerList:{
                type:Array,
                default: []
            }
        },
        data(){
            return {
                pageSize: 50, //一页显示多少条
                pageNumber: 1,
                total: this.prop_online_total, //总页数
                input:'',
                tableData:this.prop_onlineUserList,
                loading: false,
                live_id:this.liveId,
                userid:'',
                persons_online:0,
                salerList:this.prop_salerList,
                timerID: null
            }
        },
        created(){
        },
        watch:{
            prop_onlineUserList(newVal) {
                this.tableData = newVal;
            },
            prop_salerList(newValue) {
                this.salerList = newValue;
            },
            prop_online_total(newVal) {
                this.total = newVal;
            }
        },
        methods: {
            getUserList() {
                console.log('userid',this.userid);
                 this.$emit('getOnLineUser',this);
                 console.log('userid end');
            },
            handleSizeChange: function (e) {
                console.log(e);
                this.pageSize = e;
                this.$emit('reloadOnUserList',this);
            },
            handleCurrentChange: function (e) {
                console.log(e);
                this.pageNumber = e;
                this.$emit('reloadOnUserList',this);
            },
        }
    }
</script>
<style lang="scss" scoped>
.el-table::before{
    height: 0px;
}
.yixuan {
    margin: 20px;
    color: #787878;
}
</style>